<template>
  <div class="base"
       v-if="baseInfo!=null">
    <!-- 左边图片 -->
    <div class="title">
      <img :src="baseInfo.pic"
           alt="">
    </div>
    <!-- 右边文字 -->
    <div class="content">
      <!-- 上面 -->
      <div class="top">
        <span class="icon">歌单</span>
        <span>{{baseInfo.name}}</span>
        <div class="right">
          <span>歌曲量<br />{{baseInfo.trackCount}}</span>
          <span>播放量<br />{{baseInfo.playCount}}</span>
        </div>
      </div>
      <!-- 播放时间 -->
      <p class="createTime">创建时间：{{getTime}}</p>
      <!-- 中间 -->
      <div class="center">
        <div class="bofang"
             @click="allPlay()">
          <img src="~assets/img/playmusic/bofang.svg"
               alt="">
          播放全部
        </div>
        <div class="sub"
             @click="collMusic()"
             v-if="!baseInfo.subscribed"
             :class="{ban:baseInfo.subscribed}">
          <img src="~assets/img/detail/add.svg"
               alt />
          <span>收藏 ({{baseInfo.subscribedCount}})</span>
        </div>
        <div class="sub"
             @click="del()"
             v-else>
          <img src="~assets/img/detail/add.svg"
               alt />
          <span>已收藏 ({{baseInfo.subscribedCount}})</span>
        </div>
        <div class="share">
          <img src="~assets/img/detail/share.svg"
               alt />
          分享({{baseInfo.shareCount}})
        </div>
      </div>
      <!-- 底部 -->
      <div class="desc">
        <div class="biaoqian">
          标签：
          <span>{{baseInfo.tags}}</span>
        </div>
        <div class="desc-item">{{baseInfo.title}}</div>
      </div>
    </div>
    <el-dialog title="提示"
               :visible.sync="dialogVisible"
               width="30%"
               top='200px'>
      <span>确认取消收藏歌单吗？</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="cancellist()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { allplayMixin } from 'mixin/allplayMixin'
import { _collMusic } from 'network/detail'
import moment from 'moment'
export default {
  name: 'DetailBaseInfo',
  props: {
    baseInfo: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      t: 0,
      id: '',
      dialogVisible: false
    };
  },
  mixins: [allplayMixin],
  computed: {
    getTime () {
      const createTime = moment(this.baseInfo.creatTime).format('YYYY-MM-DD')
      return createTime;
    }
  },
  methods: {
    allPlay () {
      this.$emit('allPlay')
    },
    // 收藏歌单
    collMusic () {
      this.id = this.$route.params.id;
      this.t = 1;
      _collMusic(this.id, this.t).then(res => {
        if (res.data.code == 200) {
          return this.$message.success('收藏成功！')
        } else {
          return this.$message.error('收藏失败!')
        }
      })
    },
    del () {
      this.dialogVisible = true;
    },
    cancellist () {
      this.dialogVisible = false;
      this.id = this.$route.params.id;
      this.t = 2;
      _collMusic(this.id, this.t).then(res => {
        if (res.data.code == 200) {
          return this.$message.success('已取消！')
        } else {
          return this.$message.error('取消收藏失败!')
        }
      })
      // 强制刷新页面
      window.location.reload(true);
    }
  }
}
</script>

<style scoped>
.base {
  width: 100%;
  display: flex;
  font-size: 12px;
}
.title {
  display: inline-block;
  width: 200px;
}
.title img {
  width: 100%;
}
.content {
  flex: 1;
  padding: 0px 20px;
  position: relative;
}
.top span {
  font-size: 20px;
}
.top .icon {
  border: 1px solid red;
  border-radius: 4px;
  color: red;
  padding: 5px;
  font-size: 11px;
  margin-right: 10px;
}
.top .right {
  height: 30px;
  float: right;
}
.right span {
  display: inline-block;
  width: 50px;
  text-align: center;
  font-size: 12px;
  padding: 5px;
  color: #000;
}
.createTime {
  margin-top: 15px;
}
/* // 中间 */
.center {
  margin-top: 15px;
  display: flex;
  align-items: center;
}
.center div {
  padding: 7px 13px;
  background: rgb(230, 230, 230);
  border-radius: 10px;
  margin-right: 10px;
  cursor: pointer;
}
.center .bofang {
  background: #00aa85;
  color: #fff;
}
.center img {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
}
/* // 底部 */
.desc {
  position: absolute;
  bottom: 0;
  color: rgb(0, 0, 0);
}
.desc div {
  padding: 5px 0px;
}
.desc span {
  color: #00aa85;
}
.desc .desc-item {
  line-height: 30px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
/* .ban {
  background: #00aa85 !important;
  color: #f7f7f7;
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
} */
</style>
